<template>
  <div class="createPost-container">
    <el-table v-loading="listLoading" :data="list" border highlight-current-row style="overflow-x: auto;">
      <el-table-column align="center" fixed label="DocEntry" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.DocEntry }}</span>
        </template>
      </el-table-column>

      <el-table-column v-for="item in cols" align="center" :label="item.U_Fd + (item.U_IsReq == '1' ? ' *' : '')" width="150" :label-class-name="item.U_IsReq == '1' ? 'column-style' : ''" >
        <template slot-scope="scope">
          <template v-if="scope.row.edit">
            <el-input v-if="item.U_FdType == 'A' || item.U_FdType == 'M'" v-model="scope.row[item.U_Fd]" type="text" class="edit-input" size="small" />
            <el-input v-else-if="item.U_FdType == 'B' || item.U_FdType == 'N'" v-model="scope.row[item.U_Fd]" @input="limitInputDecim($event, item.U_Fd, item.U_Decim)" type="number" class="edit-input" size="small" />
            <el-input v-else v-model="scope.row[item.U_Fd]" class="edit-input" size="small" />
          </template>
          <span v-else>{{ scope.row[item.U_Fd] }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" fixed="right" label="操作" min-width="200" style="display: flex;">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.edit"
            type="success"
            size="small"
            icon="el-icon-circle-check-outline"
            @click="confirmEdit(scope.row)"
          >
            Ok
          </el-button>
          <el-button
            v-if="scope.row.edit"
            class="cancel-btn"
            size="small"
            type="warning"
            @click="cancelEdit(scope.row)"
          >
            cancel
          </el-button>
          <el-button
            v-else
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="scope.row.edit=!scope.row.edit"
          >
            Edit
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> -->

  </div>
</template>

<script>
import axios from 'axios'
import { deepClone, limitInputNumber } from '@/utils'
import { fetchBOUDD1s, updateBOUDDs, GetBouddDocEntryByRefCode, GetBouddDocEntryByRefEntry } from '@/api/res'

const defaultForm = {
  status: 'draft',
  Enable: true,
  display_time: undefined, // 前台展示时间
  id: undefined,
  platforms: ['a-platform'],
  comment_disabled: false
}

export default {
  name: 'BoudfDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postForm: Object.assign({}, defaultForm),
      loading: false,
      listLoading:false,
      list: [],
      dialogVisible: false,
      listQuery: {
        page: 1,
        limit: 20
      },
      cols:[],
      id:'',
      U_BOUDF:'',
      U_RefCode:'',
      U_RefEntry:'',
      tempRoute: {}
    }
  },
  computed: {
  },
  created() {
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id
      const U_BOUDF = this.$route.query && this.$route.query.U_BOUDF
      const U_RefEntry = this.$route.query && this.$route.query.U_RefCode

      this.U_BOUDF = U_BOUDF
      //console.log('created----',U_RefEntry, U_RefEntry == undefined, U_RefEntry == 'undefined')
      if(U_RefEntry == undefined){
        GetBouddDocEntryByRefEntry({'U_RefEntry':id,'U_BOUDF':U_BOUDF}).then(res=>{
          console.log(`GetBouddDocEntryByRefEntry-----condition:U_RefEntry = ${id} & U_BOUDF = ${U_BOUDF},Result:${res}`)
          if(res != ''){
            this.U_RefEntry = id
            this.id = res
            this.getList({
              U_BOUDF : U_BOUDF,
              DocEntry : res
            });
          }else{
            this.U_RefEntry = id
            this.id = ''
            this.getList({
              U_BOUDF : U_BOUDF,
              DocEntry : '9999999'
            });
          }
        })
      }else{
        this.U_RefEntry = U_RefEntry
        this.id = id
        this.getList({
          U_BOUDF : U_BOUDF,
          DocEntry : id
        });
      }
    }

    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    dis(val,d2){
      console.log('dis------',val,d2)
    },

    limitInputDecim(value, name, decim) {
      this.list[0][name] = limitInputNumber(value, name, decim)
    },

    cancelEdit(row) {
      console.log('cancelEdit--0----',row)
      const cols = this.cols.map(v=>v.U_Fd)
      cols.forEach(item=>{
        row[item] = row['original'+item]
      })

      console.log('cancelEdit--1----',row)
      row.edit = false
      this.$message({
        message: 'The data has been restored to the original value',
        type: 'warning'
      })
    },
    confirmEdit(row) {
      console.log('confirmEdit--0----',this.cols)
      row.edit = false
      const cols = this.cols.map(v=>v.U_Fd)
      var list = []
      this.cols.forEach(item=>{
        // let _v = {}
        // let _val = ''
        // let _col = 'U_'+item.U_FdType
        // if(item.U_FdType == 'B'){
        //   _val = Number(row[item.U_Fd])
        // }else if(item.U_FdType == 'N'){
        //   _val = Number(row[item.U_Fd])
        // }else{
        //   _val = row[item.U_Fd]
        // }

        if(item.U_IsReq == '1' && row[item.U_Fd].trim() == ''){
          this.$notify({ title: '提示', message: '['+item.U_Fd + '] 内容不能为空，请重新输入！', type: 'warning', duration: 4000 })
          row[item.U_Fd] = row['original'+item.U_Fd]
          return false
        }

      })

        this.cols.forEach(item=>{
          if((item.U_FdType == 'B' || item.U_FdType == 'N') && row[item.U_Fd].trim() == ''){
            row[item.U_Fd] = 0
          }
          row['original'+item.U_Fd] = row[item.U_Fd]
          list.push({'U_Fd':item.U_Fd, 'U_FdType' :item.U_FdType,'val': row[item.U_Fd], 'LineId': item.U_LineId })
        })

        console.log('confirmEdit-----',row)

        const config ={
          DocEntry : this.id,
          U_RefEntry : this.U_RefEntry,
          U_BOUDF : this.U_BOUDF,
          list : list
        }
        console.log('confirmEdit--1----',config,JSON.stringify(config))

        //{"DocEntry":"","U_RefCode":"51","U_BOUDF":"tbsc","list":[{"U_Fd":"涂布头间隙","U_FdType":"N","val":"30"},{"U_Fd":"涂胶实际宽度","U_FdType":"N","val":"35"},{"U_Fd":"原材料批号","U_FdType":"A","val":"AA2301"},{"U_Fd":"机速","U_FdType":"B","val":"15"},{"U_Fd":"贴合温度","U_FdType":"B","val":"120"},{"U_Fd":"贴合压力","U_FdType":"B","val":"75"},{"U_Fd":"烘箱1温度","U_FdType":"B","val":"120"},{"U_Fd":"烘箱2温度","U_FdType":"B","val":"120"},{"U_Fd":"烘箱3温度","U_FdType":"B","val":"120"},{"U_Fd":"烘箱4温度","U_FdType":"B","val":"120"},{"U_Fd":"烘箱5温度","U_FdType":"B","val":"120"},{"U_Fd":"烘箱6温度","U_FdType":"B","val":"120"},{"U_Fd":"烘箱7温度","U_FdType":"B","val":"121"},{"U_Fd":"放料张力","U_FdType":"B","val":"55"},{"U_Fd":"放料储料架张力","U_FdType":"B","val":"55"},{"U_Fd":"烘箱张力","U_FdType":"B","val":"55"},{"U_Fd":"收料摆动轮张力","U_FdType":"B","val":"55"},{"U_Fd":"收料张力","U_FdType":"B","val":"55"},{"U_Fd":"贴膜储料架张力","U_FdType":"B","val":"55"},{"U_Fd":"贴膜张力","U_FdType":"B","val":"56"},{"U_Fd":"剥离收卷张力","U_FdType":"B","val":"54"},{"U_Fd":"备注","U_FdType":"A","val":"test"}]}

        updateBOUDDs(config).then(res=>{
          console.log('confirmEdit--ok----',config, res)
          this.$message({
            message: 'The data has been edited',
            type: 'success'
          })
        }).catch(err=>{
          console.log('confirmEdit--err----',err)
        })
    },

    getList(row){
      var that = this
      fetchBOUDD1s({
        page : this.listQuery.page,
        limit : this.listQuery.limit,
        U_BOUDF : row.U_BOUDF,
        DocEntry : row.DocEntry == '9999999' ? '1+' : row.DocEntry
      }).then(res => {
        const {cols, contents} = res
        //this.list = contents
        this.cols = cols

        this.list = contents.map(v => {
          this.$set(v, 'edit', false)

          cols.forEach(item=>{
            v['original'+item.U_Fd] = v[item.U_Fd]
          })

          return v
        })

        console.log('fetchBOUDD1s ok---------',res,this.list)

        that.setTagsViewTitle()
        that.setPageTitle()

      }).catch(err=>{
        console.log('fetchMPCP1s err---------',err)
      })
    },

    setTagsViewTitle() {
      const title = 'LOT数据编辑'
      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.id}` })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    setPageTitle() {
      const title = 'LOT数据编辑'
      document.title = `${title} - ${this.id}`
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}

// .avatar{
//   width: 200px;
//   height: 200px;
//   border-radius: 50%;
// }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<style lang="scss">
  .el-table .column-style {
    color: red;
  }

</style>
